<template>
  <view class="discover-page">
    <view class="header">
      <scroll-view scroll-x="true" class="nav-scroll" scroll-with-animation>
        <text class="selected" :style="{ left: switchDis + 'vw', transition: 'left 0.3s' }">{{ selected }}</text>
        <text class="nav-item" v-for="(item, index) in navList" :key="index" @click="selectNav(index)">
          {{ item }}
        </text>
      </scroll-view>
      <image @click="switchTab(showType)" style="width: 6.4vw; height: 6.4vw; margin-left: 5.2vw" :src="`../../static/icons/${showType}.svg`"></image>
    </view>
    <view class="main">
      <articleItem v-for="(item, index) in articleList" :key="index" :item="item"></articleItem>
    </view>
  </view>
</template>

<script setup>
import articleItem from './components/articleItem.vue';
import { ref, reactive } from 'vue';

let showType = ref('phone');
function switchTab(e) {
  showType.value = showType.value == 'phone' ? 'computer' : 'phone';
}

const navList = reactive(['热门', '摄影', '人物', '风景', '动物', '抽象', '节日']);
let selected = ref(navList[0]);
let switchDis = ref(0);
function selectNav(index) {
  selected.value = navList[index];
  switchDis.value = index * 14;
}

const articleList = reactive([
  {
    title: '月亮与六便士',
    type: '热门',
    description: '贫穷的纠缠，病魔的折磨他的意识，她无法忍受，最终走向了无望的深渊，但是接下来的事情，已经无法预料',
    downloadTime: '1234',
    imgUrlList: [
      '../../static/images/night/night0.png',
      '../../static/images/night/night1.png',
      '../../static/images/night/night2.png',
      '../../static/images/night/night3.png',
      '../../static/images/night/night4.png'
    ]
  },
  {
    title: '夜晚也很美',
    type: '风景',
    description: '屋内明黄色的灯光让气氛变得温和，外婆在默默地坐在小桌旁，用她长满老茧的手指一针一针地纳着鞋底，眼睛充满着血丝',
    downloadTime: 3211,
    imgUrlList: [
      '../../static/images/noon/noon0.png',
      '../../static/images/noon/noon1.png',
      '../../static/images/noon/noon2.png',
      '../../static/images/noon/noon3.png',
      '../../static/images/noon/noon4.png'
    ]
  },
  {
    title: '夜晚也很美',
    type: '风景',
    description: '屋内明黄色的灯光让气氛变得温和，外婆在默默地坐在小桌旁，用她长满老茧的手指一针一针地纳着鞋底，眼睛充满着血丝',
    downloadTime: 3211,
    imgUrlList: [
      '../../static/images/noon/noon0.png',
      '../../static/images/noon/noon1.png',
      '../../static/images/noon/noon2.png',
      '../../static/images/noon/noon3.png',
      '../../static/images/noon/noon4.png'
    ]
  }
]);
</script>

<style>
@import './index.scss';
</style>
